/*--------------------------自定义样式--------------------------*/
.padding-12{
  padding: 12px;
}
.text-align-r{
  text-align: right;
}
.text-align-c{
  text-align: center;
}
.line{
  background: #f5f5f5;
  line-height: 28px;
}
.clearfix{
  overflow: hidden;
}
.fl{
  float: left;
}
.fr{
  float: right;
}
.border-radius5{
  border-radius: 5px;
  overflow: hidden;
}
.over{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/*--------------------------修改插件样式--------------------------*/
.swiper-pagination-bullet{
  width:15px!important;
  height:3px!important;
  border-radius: 50px!important;
}
.van-cell{
  padding: 12px 12px!important;
}
.van-cell:not(:last-child)::after{
  left: 12px!important;
  right:12px!important;
}
.van-tabs__nav--card{
  margin:0!important;
}
.van-field__error-message{
  font-size: 10px!important;
  line-height: initial!important;
}
.van-list__finished-text, .van-list__loading-text{
  line-height: 20px;
}
.picker-title .pt-submit,.van-picker__confirm{
  color:#0085ca!important;
}
.van-picker__cancel{
  color:#999!important;
}
.register-submit-btn .van-button__text{
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%,-50%);
}

/* 通过 css 设置播放器尺寸 这时<video>中的宽高属性将被覆盖*/
.mime-video{
  width:100%;
}
.mime-video .player-size {
  width: 100%;
  max-width: 100%;
  height: 0;
  padding-top: 56.25%; /* 计算方式：播放器以16：9的比率显示，这里的值为 9/16 * 100 = 56.25  */
}
/* 设置logo在高分屏的显示样式 */
@media only screen and (min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 2) {
  .tcp-logo-img {
    width: 50%;
  }
}

/*--------------------------页面公用样式--------------------------*/
html,body{
  background: #fff;
}
.more-div-wrap{
  line-height: 22px;
}
.more-div-wrap a{
  font-size:12px;
  font-weight: normal;
  color: #999;
}
.more-div-wrap i{
  background: url("../images/index-arrow.png") no-repeat center;
  display: inline-block;
  width: 6px;
  height: 10px;
  background-size: 100% 100%;
  margin-left: 2px
}
.index-list{
  margin-bottom: 20px;
}
.index-list h4{
  font-size: 15px;
  line-height: 20px;
  font-weight: bold;
  margin-bottom: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient: vertical;
  height: 40px;
  word-break: break-all;
}
.index-list h4.mime-live-list-content-title {
  height: auto;
}
.index-list p{
  font-size: 11px;
  color: #808080;
  line-height: normal;
  display: inline-block;
}
.index-list p.video-college{
  margin-right:5px
}
.index-list p.live-watch-number{
  margin-bottom: 5px;
}
.info-list{
  margin-bottom: 25px;
}
.index-list .list-icon-see{
  display: inline-block;
  background-image: url('../images/index-info-icon1.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  margin-right: 2px
}
.index-list .info-list-icon-see{
  width: 10px;
  height: 12px;
  margin-bottom: -2px;
}
.index-list .video-list-icon-see{
  width: 15px;
  height: 9px;
  background-image: url('../images/index-video-icon1.png');
}
.index-list .video-list-icon-college{
  width: 11px;
  height: 10px;
  background-image: url('../images/index-college-icon.png');
}
.index-list .audio-list-icon-see{
  width: 10px;
  height: 9px;
  background-image: url('../images/index-audio-icon1.png');
}
.mime-info-list-img{
  height: 90px;
  display: inline-block;
}
.info-list .display-table{
  width: 100%;
  height: 90px;
  overflow: hidden;
}
.info-list .display-table-cell{
  margin-top: 10px;
}
.mime-video-list-img,.mime-audio-list-img{
  position: relative;
  margin-bottom: 10px;
}
.mime-video-list-img{
  height: 93px;
}
.mime-video-list-img span{
  position: absolute;
  right: 0;
  bottom:10px;
  display: block;
  padding: 5px;
  color: #fff;
  border-radius: 50px 0 0 50px;
  background: rgba(0,0,0,.5);
  font-size: 11px;
}
.mime-audio-list-img{
  height: 100px;
}
.mime-audio-list-img .audio-num{
  position: absolute;
  left:0;
  bottom: 0;
  width: 100%;
  height: 20px;
  line-height: 20px;
  background: url("../images/audio-list-icon2.png") no-repeat center;
  background-size: 100% 100%;
  color:#fff;
  text-indent: 5px;
}
.detail-title{
  font-size: 17px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
  line-height: 20px;
}
.detail-content{
  font-size: 15px;
  color: #666;
  line-height: 22px;
  letter-spacing: 2px;
  padding: 10px 0;
}
.mime-list-wrap{
  padding-top: 45px;
}
.mime-audio-list-content h4.mime-audio-list-content-title{
  font-size: 13px;
  color: #666666;
  font-weight: lighter;
  margin-bottom: 0;
}
.tab-wrap-fixed{
  background: #fff;
  position: fixed;
  width: 100%;
  left:0;
  top:0;
  z-index: 9999;
}
.tab-wrap{
    background: #fff;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
    height: 44px;
 }
.tab-wrap .van-collapse-item__wrapper{
  position: absolute;
  width: 100%;
  left: 0;
  z-index: 9999;
}
.tab-wrap .van-collapse-item__content{
  background: #fff;
}
.tab-wrap [class*=van-hairline]{
  position: static;
}
.tab-wrap .van-cell{
  display: block;
  text-align: center;
  padding: 0 5px!important;
  margin: 10px 0;
}
.tab-wrap .van-cell::after{
  border-bottom: 0;
}
.tab-wrap .van-cell:not(:last-child)::after{
  border-bottom: 0;
}
.tab-wrap .sortItem .van-cell{
  border-right: 1px solid rgba(230, 230, 230, .5);
}
.tab-wrap .van-cell__title{
  -webkit-box-flex: initial;
  flex: initial;
  display: inline-block;
  color: #888;
}
.tab-wrap .van-cell__right-icon{
  height: auto;
  font-size: 14px;
  color: #E6E6E6;
  vertical-align: middle;
}
.tab-wrap .van-collapse-item.selected-tab_active .van-cell__title{
  color: #33C37D;
}
.tab-wrap .van-collapse-item.selected-tab_active .van-cell__right-icon{
  color: #33C37D;
}
.tab-wrap .tab-list li{
  padding:5px 0;
  font-size: 14px;
  color: #A1A9C3;
}
.tab-wrap .tab-list-mask{
  position: fixed;
  left: 0;
  background: rgba(0,0,0,.5);
  width: 100%;
  height: 100%;
}
.user-study-record-img{
  position: relative;
  margin-bottom: 10px;
  height: 84px;
}
.user-study-record-img p{
  position: absolute;
  right:0;
  top:0;
  display: block;
  background: rgba(0,0,0,.5);
  color: #fff;
  width:50%;
  height:100%;
}
.user-study-record-img p span{
  display: block;
  width:100%;
  position: absolute;
  left: 50%;
  margin-left: -50%;
  line-height: 84px;
}
.user-study-record-img label{
  display: block;
  width: 22px;
  height: 22px;
  position: absolute;
  background-image: url("../images/study-record-video.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  left:18%;
  top:50%;
  margin-top: -11px;
}
.user-study-record-img label.study-record-audio-icon{
  background-image: url("../images/study-record-audio.png");
}
.register-wrapper .register-head{
  padding-left: 12px;
  padding-top: 32px;
  padding-bottom: 40px;
}
.register-wrapper .register-head h1{
  color: #333;
  font-size: 34px;
  font-weight: 500;
  position: relative;
  margin-bottom: 18px;
  z-index: 2;
}
.register-wrapper .register-head h1::before{
  position: absolute;
  bottom: -6px;
  left: 0;
  display: block;
  content: '';
  width: 68px;
  height: 11px;
  background: #0085ca;
  z-index: -1;
}
.register-wrapper .register-head .tupu-logo span{
  font-size: 16px;
  margin-left: 10px;
}
.register-wrapper .register-head .tupu-logo label{
  display:inline-block;
  background:url('../images/logo.png') no-repeat center;
  width: 96px;
  height:29px;
  background-size: 100% 100%;
}
.register-wrapper p.register-txt .register-login-font{
  color: #0085ca;
 font-size: 15px;
}
.register-wrapper .register-footer{
  width: 50%;
  position: absolute;
  left: 50%;
  margin-left: -25%;
  margin-top: 100px;
  margin-bottom: 20px;
}
.register-wrapper .register-footer .register-foot-line{
  height: 1px;
  background: #959595;
  margin-top: 7px;
}
.register-wrapper .register-footer a{
  color: #808080;
  font-size: 13px;
}
.register-submit-btn{
  display: block;
  height: 68px!important;
  background-image: url("../images/login-btn-bg.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: #fff!important;
  line-height: 68px!important;
  overflow: hidden;
  border:none!important;
  font-size: 18px!important;
}
.register-submit-btn::before {
  top: 45% !important;
  width: 95% !important;
  height: 70% !important;
  border: inherit;
  border-color: #000;
  background-color: #000;
  border-radius: inherit;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}
.mime-agreement-font{
  color: #333;
  text-decoration: underline;
  font-size:14px
}
.register-wrapper .van-cell{
  padding: 22px 12px!important;
}
.register-wrapper .van-button--default{
  border: 1px solid #0085ca;
  color: #0085ca;
}
.register-form-wrap .van-field__label{
  max-width: 50px;
  background: #e8e8e8;
  text-align: center;
  font-size: 14px;
  color: #333;
  border-radius: 5px;
  margin-right: 10px;
}
.register-form-wrap .close-password-icon{
  width: 20px;
  height: 8px;
}
.register-form-wrap .see-password-icon{
  width: 20px;
  height: 10px;
}
.register-wrapper .van-field__control{
  font-size: 18px;
}
.index-list .course-price{
  color:#33C37D;
  font-size: 14px;
  display: block;
}
.index-list .price-wrap{
  padding-top: 10px;
}
.index-list .active_course-price{
  font-size: 14px;
  color: #808080;
}
.index-list .active-price{
  font-size: 16px;
  color:#33C37D;
  margin-left: 5px;
}
.mime-video-wrap .index-list:nth-of-type(odd),.mime-video-list .index-list:nth-of-type(odd){
  clear: left;
}
.info-footer{
  position: fixed;
  width: 100%;
  background: #f4f4f4;
  left: 0;
  bottom: 0;
  z-index: 999;
}
.info-footer .info-foot-wrap{
  padding: 8px 12px;
}
.info-footer .info-foot-wrap span{
  font-size: 12px;
  color: #999;
}
.info-footer .info-foot-wrap span.active{
  color: #333;
}
.info-footer .info-foot-wrap .div-icon{
  background-image: url("/static/images/comment-icon.png");
  background-repeat: no-repeat;
  background-position: center;
  width: 20px;
  height: 20px;
  background-size: 100% 100%;
  margin: 0 auto;
  margin-bottom: 4px;
}
.info-footer .info-foot-wrap .comment-icon{
  background-image: url("/static/images/comment-icon.png");
}

.info-footer .info-foot-wrap .thumps-up-icon{
  background-image: url("/static/images/index-college-icon.png");
}
.info-footer .info-foot-wrap .thumps-up-icon.active{
  background-image: url("/static/images/index-college-icon2.png");
}
.info-footer .info-foot-wrap .star-icon{
  background-image: url("/static/images/star-icon.png");
}
.info-footer .info-foot-wrap .star-icon.active{
  background-image: url("/static/images/star-icon-active.png");
}

.comment-list{
  padding:0 12px
}
.comment-list li{
  padding: 12px 0;
  border-bottom: 1px solid #ddd;
}
.comment-list li .comment-portrait{
  border-radius: 50%;
  width:40px;
  height: 40px;
  overflow: hidden;
}
.comment-list li h5{
  font-weight: normal;
  font-size: 14px;
}
.comment-list li p{
  font-size:14px;
  color: #808080;
  line-height: 18px;
  margin:5px 0;
}
.comment-list li span{
  font-size: 10px;
  color:#bbb;
}
.comment-mask-wrap{
  position: fixed;
  left: 0;
  top:0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.8);
  z-index: 9999;
}
.comment-mask-wrap .comment-mask-contain{
  padding-top: 40px;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}
.comment-mask-wrap .comment-mask-close{
  padding-right: 12px;
  padding-bottom: 12px;
}
.van-icon-cross{
  color:#fff;
  font-size:20px!important;
}
.comment-mask-wrap .comment-mask-textarea .van-field{
  border-radius: 10px 10px 0 0;
  overflow: hidden;
}
.comment-mask-wrap .comment-mask-textarea .van-field--min-height .van-field__control{
  min-height: 110px;
}
.comment-mask-wrap .comment-mask-submit{
  padding-right: 12px;
  padding-top: 12px;
  padding-bottom: 12px;
  background: #f4f4f4;
}
.comment-mask-wrap .comment-mask-submit .van-button--info{
  height: 30px;
  line-height: 28px;
}


